<template>
    <div>
      <Tabs value="name1">
        <TabPane label="基本信息" name="name1">
          <Form ref="formItem"  :model="formItemInfo" label-position="top">
            <Row :gutter="16">
              <Col span="8">
                <FormItem prop="project_name" label="填报项目名称:">
                  <Input v-model="formItemInfo.project_name" disabled  placeholder="填报项目名称"/>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="资金类型" prop="salary_type" class="dx">
                  <RadioGroup v-model="formItemInfo.salary_type"   placeholder="请选择资金类型">
                    <Radio label="1" disabled>质保金</Radio>
                    <Radio label="2" disabled>抵押金</Radio>
                    <Radio label="3" disabled>保证金</Radio>
                    <Radio label="99" disabled>其他</Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
              <Col span="8" v-if="this.formItemInfo.salary_type === '99'">
                <FormItem prop="other_salary_type"  label="其他资金类型:">
                  <Input v-model="formItemInfo.other_salary_type" disabled placeholder="请填报其他资金类型"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="16">
              <Col span="8">
                <FormItem prop="salary_limit" label="资金额度:">
                  <Input v-model="formItemInfo.salary_limit" type="number" disabled placeholder="请填报资金额度">
                    <span slot="append">万元</span>
                  </Input>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="资金来源" prop="salary_source" class="dx">
                  <Select v-model="formItemInfo.salary_source" disabled placeholder="请选择资金来源" style="width: 300px">
                    <Option value="1">个人缴纳</Option>
                    <Option value="2">企业缴纳</Option>
                    <Option value="3">社会机构缴纳</Option>
                    <Option value="99">其他</Option>
                  </Select>
                </FormItem>
              </Col>
              <Col span="8" v-if="this.formItemInfo.salary_source === '99'">
                <FormItem prop="other_salary_source" label="其他资金来源:">
                  <Input v-model="formItemInfo.other_salary_source" disabled placeholder="请填报其他资金来源"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="16">
              <Col span="8">
                <FormItem prop="project_cycle" label="项目周期:">
                  <Input v-model="formItemInfo.project_cycle" disabled placeholder="请填报项目周期"/>
                </FormItem>
              </Col>
              <Col span="8">
                <FormItem label="返还周期:" prop="return_cycle" class="dx">
                  <RadioGroup v-model="formItemInfo.return_cycle" disabled  placeholder="请选择返还周期">
                    <!--                                <Radio label="1" disabled>一次性</Radio>-->
                    <Radio label="2" disabled>周返还</Radio>
                    <Radio label="3" disabled>月返还</Radio>
                    <Radio label="4" disabled>季度返还</Radio>
                    <Radio label="5" disabled>年度返还</Radio>
                    <Radio label="99" disabled>其他</Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
              <Col span="8" v-if="this.formItemInfo.return_cycle === '99'">
                <FormItem prop="other_return_cycle" label="其他返还周期:">
                  <Input v-model="formItemInfo.other_return_cycle" disabled placeholder="请填报其他返还周期"/>
                </FormItem>
              </Col>
            </Row>
            <Row :gutter="16">
              <Col span="24">
                <FormItem prop="account_bank" label="开户银行:">
                  <CheckboxGroup v-model="formItemInfo.account_bank"  placeholder="请选择开户银行">
                    <Checkbox label="盛京银行" disabled></Checkbox>
                    <Checkbox label="中国工商银行" disabled></Checkbox>
                    <Checkbox label="中国建设银行" disabled></Checkbox>
                    <Checkbox label="中国农业银行" disabled></Checkbox>
                    <Checkbox label="中国银行" disabled></Checkbox>
                    <Checkbox label="中国交通银行" disabled></Checkbox>
                    <Checkbox label="中国邮政储蓄银行" disabled></Checkbox>
                    <Checkbox label="中信银行" disabled></Checkbox>
                    <Checkbox label="光大银行" disabled></Checkbox>
                    <Checkbox label="招商银行" disabled></Checkbox>
                    <Checkbox label="浦发银行" disabled></Checkbox>
                    <Checkbox label="民生银行" disabled></Checkbox>
                    <Checkbox label="华夏银行" disabled></Checkbox>
                    <Checkbox label="平安银行" disabled></Checkbox>
                    <Checkbox label="兴业银行" disabled></Checkbox>
                    <Checkbox label="广发银行" disabled></Checkbox>
                    <Checkbox label="渤海银行" disabled></Checkbox>
                    <Checkbox label="浙商银行" disabled></Checkbox>
                    <Checkbox label="恒丰银行" disabled></Checkbox>
                    <Checkbox label="其他" disabled></Checkbox>
                  </CheckboxGroup>
                </FormItem>
              </Col>
              <Col span="5" v-if="check">
                <FormItem prop="other_account_bank" label="其他开户银行:">
                  <Input v-model="formItemInfo.other_account_bank" disabled placeholder="填报其他开户银行"/>
                </FormItem>
              </Col>
              <Col span="24">
                <FormItem prop="project_duty" label="项目责任：">
                  <Input v-model="formItemInfo.project_duty" disabled type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入项目责任"></Input>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </TabPane>
        <TabPane label="事项信息" name="name2">
          <flow-detail></flow-detail>
          <problem-detail></problem-detail>
          <div v-show="scrollTop > 400" @click="backTopTrigger">
            <BackTop :bottom="30" :right="60"></BackTop>
          </div>
        </TabPane>
      </Tabs>
    </div>
</template>

<script>
import {} from '@/api/setting/base-info'
import FlowDetail from './components/flow-detail/index'
import ProblemDetail from './problem-detail/index'
export default {
  components: { ProblemDetail, FlowDetail },
  data () {
    return {
      scrollTop: 0,
      formItemInfo: {
        project_name: '',
        salary_type: '',
        other_salary_type: '',
        salary_limit: '',
        salary_source: '',
        other_salary_source: '',
        project_cycle: '',
        return_cycle: '',
        other_return_cycle: '',
        account_bank: []
      },
      check: false
    }
  },
  methods: {
    // 手动返回顶部
    backTopTrigger () {
      document.querySelector('.ivu-layout-content').scrollTo(0, 0)
    }
  },
  mounted () {
    document.querySelector('.ivu-layout-content').onscroll = () => {
      let _this = this
      _this.scrollTop = document.querySelector('.ivu-layout-content').scrollTop
    }
    this.formItemInfo = this.$route.query.aa
    let banks = this.formItemInfo.account_bank.toString()
    if (banks.indexOf('其他') >= 0) {
      this.check = true
    } else {
      this.check = false
    }
  },
  watch: {}
}
</script>

<style scoped lang="less">
    .container {
        margin-bottom: 100px;
    }
    /deep/ .ivu-back-top {
        display: block;
    }
</style>
